<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="form" :rules="rules" ref="refForm" label-width="120px">
      <el-form-item label="用户层级" prop="userLevel">
        <el-select v-model="form.userLevel" :multiple="true">
          <el-option v-for="item in userLevelList"
                     :key="item.levelId"
                     :label="item.name"
                     :value="item.levelId">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="主题:" prop="name">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize placeholder="请输入内容"
                  v-model="form.name">
        </el-input>
      </el-form-item>

      <el-form-item label="简介:" prop="summary">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize placeholder="请输入内容"
                  v-model="form.summary">
        </el-input>
      </el-form-item>

      <el-form-item label="显示端:" prop="showClient">
        <el-select v-model="form.showClient" placeholder="请选择显示端" :multiple="true">
          <el-option v-for="item in consts.ADVER_DEVICE_TYPE_ACTIVE"
                     v-if="item.value !== -1"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="换卡支付方式:" prop="payment">
        <el-select v-model="form.payment" filterable placeholder="请选择支付方式">
          <el-option v-for="item in consts.NOTICE_PAY_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.title">
          </el-option>
        </el-select>
      </el-form-item>

      <el-row>
        <el-col :span="10">
          <el-form-item label="新收款银行卡:" prop="newBankName">
            <el-select v-model="form.newBankName" filterable placeholder="请选择新收款银行卡">
              <el-option v-for="item in consts.NOTICE_BANK_TYPE"
                         :key="item.value"
                         :label="item.title"
                         :value="item.title">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="newUsername">
            <el-input v-model="form.newUsername" placeholder="请输入持卡人姓名"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="原收款银行卡:" prop="bankName">
            <el-select v-model="form.bankName" filterable placeholder="请选择原收款银行卡">
              <el-option v-for="item in consts.NOTICE_BANK_TYPE"
                         :key="item.value"
                         :label="item.title"
                         :value="item.title">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入持卡人姓名"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="时间周期:" class="postInfo-container-item" prop="time">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
        <el-tip>在此时间周期内，每天用户第一次登录时，显示弹窗消息</el-tip>
      </el-form-item>
      <el-button v-loading="loading" style="margin-left: 10px;" type="primary"
                 @click="doSave({
                 action: 'saveForm',
                 form: {
                 name: 'refForm',
                 scrollToError: true
                 }})">确定
      </el-button>
    </el-form>
  </div>
</template>

<script>

  import {
    getUserLevelList,
  } from '@/services/api/userLevel';

  import {
    noticeDashboardBanklDialogEditApi as editApi,
    noticeDashboardBankDialogSaveApi as saveApi
  } from '@/services/api/notice'
  import {form} from '@/build'

  export default {
    name: 'dashboard-normal-notice',
    components: {},

    mixins: [form],

    props: ['id','rowData'],
    data() {
      return {
        userLevelList: [],
        userListOptions: [],
        selectAll: false,
        isIndeterminate: false,
        form: {
          id: this.id,
          userLevel: [],
          name: undefined,
          summary: undefined,
          showClient: [],
          time: undefined,
          payment: undefined,
          newBankName: undefined,
          newUsername: undefined,
          bankName: undefined,
          username: undefined,
        },
        rules: {
          userLevel: {required: true, message: '通知用户层级必须选择'},
          showClient: {required: true, message: '账户类型必须选择'},
          summary: {required: true, message: '简介必须填写'},
          name: {required: true, message: '主题必须填写'},
          payment: {required: true, message: '请输入持卡人姓名'},
          newBankName: {required: true, message: '新收款银行卡必须选择'},
          newUsername: {required: true, message: '请输入持卡人姓名'},
          bankName: {required: true, message: '原收款银行卡必须选择'},
          username: {required: true, message: '请输入持卡人姓名'},
          time: {required: true, message: '时间周期必须选择'},
        }
      }
    },
    mounted() {
      this.bindGet(getUserLevelList, 'userLevelList', { });
      this.getAll();

      if(!_.isUndefined(this.rowData)){
        const {showClientArray,startTime,endTime,content,userLevelArray} = this.rowData
        const bankObj = JSON.parse(content);
        const {bankName,newBankName,payment,newUsername,username} = bankObj
        this.form = {
          ...this.rowData,
          bankName: bankName,
          newBankName: newBankName,
          payment: payment,
          newUsername,
          username,
          userLevel:userLevelArray,
          showClient:showClientArray,
          time: [moment(startTime).format('YYYY-MM-DD HH:mm:ss'),moment(endTime).format('YYYY-MM-DD HH:mm:ss')]
        }
      }

      this.bindSave(saveApi, 'saveForm', 'form', {
        beforeSend: data =>{
          const {showClient,time,userLevel} = data
          let startTime= undefined, endTime= undefined;
          if(!_.isUndefined(time) && _.isArray(time)){
            startTime= time[0];
            endTime= time[1];
          }
          return { ...data,showClient:showClient.join(','),startTime,endTime,userLevel:userLevel.join(',')}
        },
        afterSuccess: () => {
          this.resetForm('refForm');
          this.$emit('on-success');
          if (!this.form.id) {
            this.$router.push({
              path: '/notice/notice-pop',
              replace: true,
              query: {
                tab: 'one'
              }
            })
          }
        }
      });
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .image {
    width: 100px;
    height: 100px;
  }
</style>
